<template>
  <view class="orders_maintenance_box">
    <uni-section title="维修申请" type="line" titleFontSize="34rpx" />
    <view class="content">
      <binaryLayout :right-text="detailData.maintenanceTitle">
        <template #left>
          <view class="item">维修类型</view>
        </template>
      </binaryLayout>

      <binaryLayout :right-text="detailData.createTime.toString()">
        <template #left>
          <view class="item">提交时间</view>
        </template>
      </binaryLayout>

      <binaryLayout>
        <template #left>
          <view class="item">订单状态</view>
        </template>
        <template #right>
          <view class="state">{{
            getEnumValue(detailData.maintenanceState)
          }}</view>
        </template>
      </binaryLayout>

      <binaryLayout :right-text="detailData.maintenanceMsg">
        <template #left>
          <view class="item">故障描述</view>
        </template>
      </binaryLayout>

      <binaryLayout :right-text="detailData.maintenanceTime.toString()">
        <template #left>
          <view class="item">上门时间</view>
        </template>
      </binaryLayout>

      <binaryLayout :right-text="detailData.remark">
        <template #left>
          <view class="item">备注</view>
        </template>
      </binaryLayout>

      <binaryLayout left-text="故障图片" v-if="faultImage.length > 0" />
      <uni-file-picker
        limit="9"
        :readonly="true"
        v-model="faultImage"
        file-extname="png,jpg,svg"
        :imageStyles="imageStyles"
      />
    </view>

    <uni-section title="维修结果" type="line" titleFontSize="36rpx" v-if="!isCancel" />

    <view class="content" v-if="isEnd">
      <binaryLayout :right-text="detailData.maintenanceTimer.toString()">
        <template #left>
          <view class="item">上门时间</view>
        </template>
      </binaryLayout>

      <binaryLayout :right-text="detailData.maintenanceCause">
        <template #left>
          <view class="item">故障原因</view>
        </template>
      </binaryLayout>

      <binaryLayout left-text="维修前" v-if="beforeRepairImage.length > 0" />
      <uni-file-picker
        limit="9"
        :readonly="true"
        v-model="beforeRepairImage"
        file-extname="png,jpg,svg"
        :imageStyles="imageStyles"
      />

      <binaryLayout left-text="维修后" v-if="resultRepairImage.length > 0" />
      <uni-file-picker
        limit="9"
        :readonly="true"
        v-model="resultRepairImage"
        file-extname="png,jpg,svg"
        :imageStyles="imageStyles"
      />
    </view>

    <!-- 未完成时，展示的内容 -->
    <view class="processing" v-if="!isCancel && !isEnd"> 维修处理中，请耐心等待结果 </view>
  </view>
</template>

<!-- 维修订单详情页面 -->
<script lang="ts" setup>
import {
  OrdersStateEnum,
  checkStateEnum,
  getEnumValue,
} from '@/config/enum/enum'
import { ReqSelectOrdersByIdAndCategory } from '@/api/orders'
import uniFilePicker from '@/components/common/uni-file-picker/components/uni-file-picker/uni-file-picker.vue'
import uniSection from '@/components/common/uni-section/components/uni-section/uni-section.vue'
import binaryLayout from '@/components/layout/binary_layout/binary-layout.vue'
import type {
  DetailOrdersMaintenance,
  QueryOrdersCategoryAndId,
} from '@/config/data/data'
import { onLoad } from '@dcloudio/uni-app'
import { ref } from 'vue'

//图片样式
const imageStyles = ref({
  width: 110,
  height: 110,
  border: {
    radius: '10rpx',
  },
})

// 维修是否完成
const isEnd = ref(false)

// 维修是否已取消
const isCancel = ref(false)

//维修前图片回显数组
const beforeRepairImage = ref<any>([])

//维修结果图片回显数组
const resultRepairImage = ref<any>([])

//故障图片回显数组
const faultImage = ref<any>([])

//数据
const detailData = ref<DetailOrdersMaintenance>({
  maintenanceId: 0,
  createTime: new Date(),
  maintenanceTitle: '',
  maintenanceAddress: '',
  maintenanceTime: new Date(),
  maintenanceImg: '',
  maintenanceMsg: '',
  maintenancePersonnel: '',
  maintenanceState: 0,
  updateTime: new Date(),
  remark: '',
  maintenancePhone: '',
  maintenanceResultsImg: '',
  maintenanceBeforeImg: '',
  maintenanceCause: '',
  maintenanceTimer: new Date(),
})

//请求参数
const query = ref<QueryOrdersCategoryAndId>({
  id: 0,
  category: '',
})

//获取数据
const getData = () => {
  ReqSelectOrdersByIdAndCategory(query.value).then((res) => {
    if (res.code == 200 && res.data) {
      detailData.value = res.data
      faultImage.value = pictureEchoHandler(detailData.value.maintenanceImg)
      isEnd.value = checkStateEnum(
        detailData.value.maintenanceState,
        OrdersStateEnum.FINISH
      )
      isCancel.value = checkStateEnum(
        detailData.value.maintenanceState,
        OrdersStateEnum.CANCEL
      )
      //维修是否完成
      if (isEnd.value) {
        beforeRepairImage.value = pictureEchoHandler(
          detailData.value.maintenanceBeforeImg
        )
        resultRepairImage.value = pictureEchoHandler(
          detailData.value.maintenanceResultsImg
        )
      }
    }
  })
}

/**
 * 图片回显处理
 * @param img: 图片字符串，逗号分割
 */
const pictureEchoHandler = (img: string) => {
  let arr: any = []
  if (img != '' && img) {
    let tempArr = img.split(',')
    tempArr.forEach((url) => {
      arr.push({
        url,
      })
    })
  }

  return arr
}

// 页面加载
onLoad((e) => {
  if (e && e.id && e.category) {
    query.value = {
      id: e.id,
      category: e.category,
    }
    getData()
  }
})
</script>

<style scoped lang="scss">
.orders_maintenance_box {
  width: 100%;
  background-color: $uni-bg-color-grey;
  min-height: 100vh;

  .content {
    padding: 0 30rpx 20rpx;
    width: calc(100% - 60rpx);
    background-color: $uni-bg-color;
    margin-bottom: 30rpx;

    .item {
      width: 160rpx;
    }
    .state {
      color: rgb(245, 140, 27);
    }
  }
  .processing {
    height: 200rpx;
    text-align: center;
    line-height: 200rpx;
    color: rgb(99, 97, 94);
    background-color: $uni-bg-color;
  }
}
</style>
